<template>
	<ul class="grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] border-l border-t rounded">
		<li
			:class="[
        'border-r border-b flex flex-col justify-center items-center cursor-pointer',
        itemClass
      ]"
			v-for="(i, index) in iconData"
			:key="index"
			@click="handleClick(`${collection}:${i}`, index)"
		>
			<component
				:is="Icon"
				:icon="`${collection}:${i}`"
				:class="[
          iconClass,
          { [activeClass]: modelValue ? modelValue === `${collection}:${i}` : choose === index }
        ]"
			></component>
			<div class="text-sm mt-3" v-if="showText">{{ convertString(i) }}</div>
		</li>
	</ul>
</template>

<script setup lang="ts">
import { loadIcons, Icon } from '@iconify/vue'
import data from './icon-ep.json'
import type { IconListProps } from './types'

const modelValue = defineModel()

const props = withDefaults(defineProps<IconListProps>(), {
	iconData: () => data,
	collection: 'ep',
	iconClass: 'text-3xl',
	itemClass: 'hover:bg-sky-100  py-4',
	activeClass: '',
	showText: true
})

const emits = defineEmits(['click'])
const choose = ref(-1)

//图表列表这样的组件最好提前先预加载一下, 不然会出现闪烁
onBeforeMount(async () => {
	props.iconData &&
	props.iconData.length &&
	(await loadIcons(props.iconData.map((o) => `${props.collection}:${o}`)))
})

async function handleClick(i: string, num: number) {
	choose.value = num
	modelValue.value = i
	emits('click', i)
}

//region arrow-left-bold --> ArrowLeftBold
function convertString(input: string): string {
	const words = input.split('-')
	const capitalizedWords = words.map((word, index) => {
		if (index === 0) {
			return capitalize(word)
		} else {
			return capitalize(word, true)
		}
	})
	return capitalizedWords.join('')
}

function capitalize(word: string, capitalizeFirstLetter = false): string {
	if (capitalizeFirstLetter) {
		return word.charAt(0).toUpperCase() + word.slice(1)
	} else {
		return word.toLowerCase().replace(/(?:^|-)(\w)/g, (_, c) => c.toUpperCase())
	}
}
//endregion

</script>

<style scoped></style>
